<template>
  <baidu-map class="bm-view" :center="mapCenter" :zoom="mapZoom" :scroll-wheel-zoom="true" ak="baidu-ak"
    @ready="handlerBMap">
    <bm-marker v-if="showPoint" v-for="(item, index) in carBasicMonitoring" :key="index"
      :position="{ lng: item.lng, lat: item.lat }" :dragging="false" :icon="configCarMarkIcon(item.deviceSubStatus)"
      :animation="animation" @click="handleWindowOpen(item)">
      <!--      <bm-label-->
      <!--        :label-style="{ color: 'red', fontSize: '14px' }"-->
      <!--        :offset="{ width: -18, height: -15 }"-->
      <!--        :content="item.carNo"-->
      <!--        @click="handleWindowOpen(item)"-->
      <!--      />-->

    </bm-marker>
    <bm-circle :center="circlePath.center" :radius="circlePath.radius" stroke-color="blue" :stroke-opacity="0.5"
      :stroke-weight="2"></bm-circle>

    <bm-info-window :position="{ lng: carGps.lng, lat: carGps.lat }" :show="showWindow" @close="handleWindowColse"
      @open="handleWindowOpen(carGps)">
      <div style="width: 600px">
        <el-descriptions title="车辆信息" :column="2">
          <el-descriptions-item label="车牌号">{{ carGps.carNo }}</el-descriptions-item>
          <el-descriptions-item label="设备号">{{ carGps.deviceNo }}</el-descriptions-item>
          <el-descriptions-item label="定位时间">{{ carGps.timeReported }}</el-descriptions-item>
          <el-descriptions-item label="油量" v-if="fuelType !== null">
            {{ oilQuantity }}
            <span v-if="fuelType == '1'">%</span>
            <span v-if="fuelType == '0'">升</span>
          </el-descriptions-item>
          <el-descriptions-item label="电量" v-if="batteryType !== null">
            {{ electricity }}
            <span v-if="batteryType == '1'">%</span>
            <span v-if="batteryType == '0'">千瓦</span>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <div>
              <el-tag size="small"> {{
                1 === carGps.deviceSubStatus ? '行驶' : 2 === carGps.deviceSubStatus ? '静止' : 3 === carGps.deviceSubStatus
                  ?
                  '离线' : 4 === carGps.deviceSubStatus ? '报警' : ''
              }}
              </el-tag>
              <span v-if="carGps.dxPosition">{{ carGps.deviceSubStatus == 2 ? getRestTime(carGps.dxPosition.serverTime,
                carGps.dxPosition.datetime) : '' }}</span>
              <span v-if="carGps.dxPosition">
                {{ carGps.deviceSubStatus == 3 ? getRestTime(carGps.dxPosition.serverTime, carGps.dxPosition.heartTime)
                  : '' }}</span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="定位方式" v-if="carGps.dxPosition">{{ {
            0: '北斗GPS', 1: 'WIFI定位', 2: '基站定位'
          }[getStatenumber(carGps.dxPosition.statenumber)[15]] || '--' }}</el-descriptions-item>
          <el-descriptions-item label="ACC" v-if="carGps.dxPosition"> {{ {
            0: '关', 1: '开'
          }[getStatus(carGps.dxPosition.status)[0]] || '--' }}</el-descriptions-item>
          <el-descriptions-item label="电压" v-if="carGps.dxPosition"> {{ getStatenumber(carGps.dxPosition.statenumber)[5]
            || '--' }}V</el-descriptions-item>
          <el-descriptions-item label="主电状态" v-if="carGps.dxPosition"> {{ {
            0: '断开', 1: '接通'
          }[getStatus(carGps.dxPosition.status)[6]] || '--' }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="" :column="3">
          <el-descriptions-item label="地址"> {{ carGps.addrDetail || '--' }}</el-descriptions-item>
        </el-descriptions>
        <div style="display: flex;justify-content: flex-end">
          <el-button type="primary" size="small" @click="carOperate(carGps, 0)"
            v-if="carGps.manufacturer == 5">开门</el-button>
          <el-button type="primary" size="small" @click="carOperate(carGps, 1)"
            v-if="carGps.manufacturer == 5">关门</el-button>
          <el-button type="primary" size="small" @click="carOperate(carGps, 2)"
            v-if="carGps.manufacturer == 5">开后备箱</el-button>
          <!-- <el-button type="primary" size="small" @click="carOperate(carGps,3)">鸣笛</el-button>
          <el-button type="primary" size="small" @click="carOperate(carGps,4)">断油</el-button>
          <el-button type="primary" size="small" @click="carOperate(carGps,5)">断电</el-button> -->
          <el-button type="primary" size="small" @click="handleDeviceDetail(carGps)">查看详情</el-button>
        </div>

      </div>


    </bm-info-window>

  </baidu-map>
</template>

<script>
import _ from 'lodash'
import * as carApi from '@/api/car/car_basic';
export default {
  props: {
    carBasicMonitoring: {
      type: Array
    }
  },
  data() {
    return {
      oilQuantity: null, // 油量
      electricity: null, // 电量
      fuelType: null, // 是否显示油量
      batteryType: null, // 是否显示电量
      carMark_1: require("@/assets/images/carMark_1.png"),
      carMark_2: require("@/assets/images/carMark_2.png"),
      carMark_3: require("@/assets/images/carMark_3.png"),
      carMark_4: require("@/assets/images/carMark_4.png"),
      showWindow: true,
      showPoint: true,
      mapZoom: 12,
      animation: '',
      point: {
        lng: 116.403963,
        lat: 39.915119,
        label: 'KujoMiva',
      },
      icon: {
        url: process.env.VUE_APP_BASE_IMAGE_URL + 'carLocation/OffLine_90.png',
        //url: '/static/OffLine_90.png',
        size: { width: 52, height: 26 },
        opts: { anchor: { width: 27, height: 13 } },
      },
      mapCenter: {
        lng: 116.403963,
        lat: 39.915119,
      },
      circlePath: {
        center: {
          lng: 0,
          lat: 0
        },
        radius: 100
      },
      carGps: { fuelLevel: 0 },
      fuelLevel: 0,
    }
  },
  watch: {
    carGps: {
      deep: true,
      handler(val) {
        this.carGps = val
        this.$set(this.carGps, 'fuelLevel', val?.fuelLevel)
      }
    },
    carBasicMonitoring: {
      deep: true,
      handler(val) {
        this.carBasicMonitoring = val
        val?.map((res) => {
          if (res.carNo == this.carGps.carNo) {
            console.log(res, '1111111111111111111')
            this.circlePath.center.lng = res.lng ? res.lng : ''
            this.circlePath.center.lat = res.lat ? res.lat : ''
          }
        })
      }
    },
    // 'this.circlePath.center': {
    //   deep: true,
    //   handler(val) {
    //     this.circlePath.center.lng = val.lng
    //     this.circlePath.center.lat = val.lat
    //   }
    // }
  },
  methods: {
    carOilQuantity(id) {
      carApi.carOilQuantityt({ id: id }).then((res) => {
        if (res.data) {
          this.oilQuantity = res.data.fuelLevel
          this.fuelType = res.data.fuelType
          this.electricity = res.data.batteryLevel
          this.batteryType = res.daya.batteryType
        }
      })
    },
    // 车辆操作 0 开门 1关门 2开后备箱 3鸣笛 4断油 5断电
    carOperate(info, type) {
      carApi.sendCarKeysinstruction({ instId: type, deviceNo: info.deviceNo }).then((res) => {
        if (res.code == 200) {
          this.$message.success('操作成功')
        }
      })
    },
    getStatus(gpsStatus) {
      return gpsStatus.split("");
    },
    getStatenumber(statenumber) {
      return statenumber.split(",");
    },
    configCarMarkIcon(deviceSubStatus) {
      // let icon= '@/assets/images/carMark_'+deviceSubStatus+'.png';
      return {
        url: this["carMark_" + deviceSubStatus],
        //url: '/static/OffLine_90.png',
        size: { width: 36, height: 36 },
        opts: { anchor: { width: 18, height: 18 } },
      }
    },
    handlerBMap({ BMap, map }) {
      this.BMap = BMap
      this.map = map
    },
    makerCenter(point) {
      this.mapCenter.lng = point.lng
      this.mapCenter.lat = point.lat
    },
    handlePoint(lng, lat, label = 'KujoMiva') {
      this.point.lng = lng
      this.point.lat = lat
      this.point.label = label
      this.showPoint = true
      this.makerCenter(this.txMapToBdMap(this.point))
    },
    handleReset() {
      // this.point.lng = 116.403963
      // this.point.lat = 39.915119
      // this.point.label = 'KujoMiva'
      // this.showPoint = false
      // this.makerCenter(this.txMapToBdMap(this.point))
    },
    handleWindowOpen(item) {
      this.showWindow = false
      this.carGps = item;
      this.$set(this.carGps, 'fuelLevel', this.fuelLevel)
      if (item.control == 1) {
        this.carOilQuantity(item.carId)
      } else {
        if (item.power) {
          this.fuelType = '1'
          this.oilQuantity = item.power
        }
      }
      this.showWindow = true
    },
    handleDeviceDetail(item) {
      this.$emit('markerClick', item)
    },
    handleWindowColse() {
      this.showWindow = false
    },
    txMapToBdMap(lng, lat) {
      let x_pi = (3.14159265358979324 * 3000.0) / 180.0
      let x = _.toNumber(lng)
      let y = _.toNumber(lat)
      let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
      let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
      let lngs = z * Math.cos(theta) + 0.0065
      let lats = z * Math.sin(theta) + 0.006

      return {
        lng: lngs,
        lat: lats,
      }
    },
    getRestTime(startTime, endTime) {
      var cha = new Date(startTime).getTime() - new Date(endTime).getTime();
      var day = Math.floor(cha / (24 * 3600 * 1000));
      var hours = Math.floor(cha % (24 * 3600 * 1000) / (3600 * 1000));
      var minutes = Math.floor(cha % (24 * 3600 * 1000) % (3600 * 1000) / (60 * 1000));
      var seconds = Math.floor(cha % (24 * 3600 * 1000) % (3600 * 1000) % (60 * 1000) / 1000);
      var s1 = "";

      if (day >= 1) {
        s1 += day + "天"
      }
      if (hours >= 1) {
        s1 += hours + "小时";
      }
      if (minutes > 0) {
        s1 += minutes + "分钟";
      }
      return s1;

    },
    makerCurrentCar(point, car) {
      this.mapCenter.lng = point.lng
      this.mapCenter.lat = point.lat
      this.circlePath.center = point;
      this.mapZoom = 16;
      this.carGps = car;
      this.$set(this.carGps, 'fuelLevel', car.fuelLevel)
      this.fuelLevel = car.fuelLevel
      // this.animation = 'BMAP_ANIMATION_BOUNCE';

    }
  },
}
</script>

<style scoped>
.bm-view {
  width: 100%;
  height: calc(100vh - 165px) !important;
}
</style>
